import { useEffect, useImperativeHandle, forwardRef } from 'react';
import { Form, Input } from 'antd';
import { formNameVerification } from '../../utils';

interface branchProps {
    curElement: any;
}

const Branch = forwardRef((props: branchProps, ref) => {
    const { curElement } = props;
    const [form] = Form.useForm();

    useEffect(() => {
        form.setFieldsValue({
            id: curElement?.id,
            name: curElement?.businessObject?.name,
        });
    }, [curElement]);

    useImperativeHandle(ref, () => ({
        form,
    }));

    return (
        <Form
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
            labelAlign='left'
            labelWrap={true}
            layout={'horizontal'}
            form={form}
        >
            <Form.Item label='分支标识' name='id'>
                <Input readOnly />
            </Form.Item>
            <Form.Item
                label='分支名称'
                name='name'
                rules={formNameVerification}
                className='process-designer-form-item-required'
            >
                <Input />
            </Form.Item>
        </Form>
    );
})

export default Branch;